<template>
    <div class="statistics_box">
        <div class="title">
            <span>{{ echartsName }}</span>
            <!-- <el-button :disabled="!state?.length" @click="onExportImg(myChartLineRef)">导出图片</el-button> -->
        </div>
        <div v-if="state?.length" id="echarts" ref="myChartLineRef"></div>
        <div v-else class="none_data">
            <img class="no_img" src="@/assets/noData.png" alt="" />
            <div>暂无数据</div>
        </div>
    </div>
</template>
<script setup lang="tsx">
import { ref, inject, defineExpose, nextTick } from 'vue';
import { export2Img } from '@/utils/utils';

const echarts: any = inject('ec');

const echartsName = ref('交易转化');
const myChartLineRef = ref(null);
const state = ref<any>([]);
const onExportImg = (chartEl: any) => {
    export2Img(chartEl, echartsName.value);
};
const getEchartsLine = () => {
    const myChartLine = echarts?.init(myChartLineRef.value);
    const option = {
        // tooltip: {
        //   trigger: 'item'
        // },
        series: [
            {
                name: echartsName.value,
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: state.value
            }
        ]
    };
    myChartLine.setOption(option);
    // window.onresize = function () {
    //   myChartLine.resize()
    // }
    window.addEventListener('resize', function () {
        //执行
        if (myChartLine) {
            // 判断一下，防止在初始化的时候报错，cannot read property 'resize' of null
            myChartLine.resize();
        }
    });
};
const onFunnelChart = (res: any, type: number, source: any) => {
    if (source == 3) {
        // 淘宝店铺
        echartsName.value = '客户转化';
        state.value = [
            { value: res.add_user_num, name: `新增用户(${res.add_user_num})` },
            { value: res.bind_cust_num, name: `客户绑定(${res.bind_cust_num})` },
            { value: res.add_qy_cust_num, name: `加微人数(${res.add_qy_cust_num})` }
        ];
    } else {
        if (type == 1) {
            echartsName.value = '交易转化';
            state.value = [
                { value: res.visitors_num, name: `访客量(${res.visitors_num})` },
                { value: res.purchased_num, name: `加购人数(${res.purchased_num})` },
                { value: res.order_num, name: `下单人数(${res.order_num})` },
                { value: res.pay_num, name: `支付人数(${res.pay_num})` }
            ];
        }
        if (type == 2) {
            echartsName.value = '客户转化';
            state.value = [
                { value: res.add_user_num, name: `新增用户(${res.add_user_num})` },
                { value: res.bind_cust_num, name: `客户绑定(${res.bind_cust_num})` },
                { value: res.add_qy_cust_num, name: `加微人数(${res.add_qy_cust_num})` }
            ];
        }
    }
    if ([1, 4].includes(source)) {
        state.value.unshift({ value: res.visitors_num, name: `访客(${res.visitors_num})` });
    }
    nextTick(() => {
        getEchartsLine();
    });
};
defineExpose({
    onFunnelChart
});
</script>
<style scoped lang="scss">
.statistics_box {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 26px;
    background: #fff;
    box-shadow: 0 4px 4px 0 rgb(240 240 240 / 50%);
    border: 1px solid #eaeaea;
    font-size: 14px;
    color: #33302d;

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 14px;
        border-bottom: 1px solid #eaeaea;
        font-size: 16px;
    }

    .btn_box {
        display: flex;
        justify-content: space-between;
        padding: 16px 0;
    }

    #echarts {
        display: flex;
        justify-content: center;
        height: 500px;
    }
}

.circle_box {
    display: flex;
    margin-bottom: 16px;

    .circle {
        flex: 1;
        padding: 20px 26px;
        margin-right: 20px;
        background: #fff;
        box-shadow: 0 4px 4px 0 rgb(240 240 240 / 50%);
        border: 1px solid #eaeaea;

        .circle_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 8px;
            border-bottom: 1px solid #eaeaea;
        }
    }

    .margin {
        margin-right: 0;
    }
}

.none_data {
    margin: 100px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #909399;

    img {
        transform: translateX(15%);
    }
}
</style>
